<template>
    <div class="common-layout">
        <el-container class="container">
            <el-header class="header">
                <div class="header-left">
                    <svg class="icon">
                        <use xlink:href="#icon-douzi"></use>
                    </svg>
                    <span>豆果美食</span>
                </div>
                <div class="header-right">
                    <svg class="icon">
                        <use xlink:href="#icon-fasongyoujian"></use>
                    </svg>
                    <div>
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <ul class="list">
                            <li v-for="item in list" :key="item">
                                <svg class="icon">
                                    <use :xlink:href="item.icon"></use>
                                </svg>
                                <span>{{ item.title }}</span>
                            </li>
                        </ul>
                    </div>
                    <svg class="icon" @click="router.replace('./login')">
                        <use xlink:href="#icon-tuichu"></use>
                    </svg>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" class="aside">
                    <el-scrollbar style="height: calc(100vh - 60px);">
                        <el-menu class="menu" unique-opened router>
                            <el-menu-item :index='userPath'>用户管理</el-menu-item>
                            <template v-for="item in menu" :key="item.id">
                                <template v-if="item.children">
                                    <el-sub-menu :index="item.id">
                                        <template #title>
                                            <!-- <svg>
                                            <use :xlink:href="item.icon"></use>
                                        </svg> -->
                                            <span>{{ item.title }}</span>
                                        </template>
                                        <el-menu-item-group>
                                            <el-menu-item v-for="p in item.children" :key="p.id" :index="p.path">{{ p.title
                                            }}</el-menu-item>
                                        </el-menu-item-group>
                                    </el-sub-menu>
                                </template>
                                <template v-else>
                                    <el-menu-item>
                                        <!-- <svg>
                                        <use :xlink:href="item.icon"></use>
                                    </svg> -->
                                        <span>{{ item.title }}</span>
                                    </el-menu-item>
                                </template>
                            </template>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const list = ref([
    {
        id: 1,
        icon: '#icon-wode-copy',
        title: '个人中心',
    },
    {
        id: 2,
        icon: '#icon-kongjian',
        title: '个人空间',
    },
    {
        id: 3,
        icon: '#icon-shezhi',
        title: '账户设置',
    }
])
const userPath = '/user';
const menu = ref([
    {
        id: 2,
        icon: '',
        title: '菜谱',
        children: [
            {
                pid: 1,
                id: 11,
                path: '/normal',
                title: '常见菜式'
            }, {
                pid: 1,
                id: 12,
                path: '/china',
                title: '中国菜系'
            }, 
        ]
    }, {
        id: 3,
        icon: '',
        title: '商城',
        children: [
            {
                pid: 2,
                id: 21,
                path: '/goods',
                title: '商品管理'
            }, {
                pid: 2,
                id: 22,
                path: '/message',
                title: '留言管理'
            },
        ]
    }
])
const router = useRouter();


</script>
<style>
.container {
    height: 100vh;
}

.header {
    display: flex;
    height: 65px;
    justify-content: space-between;
    align-items: center;
    background-image: url('https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg');
}

.header .icon {
    padding: 0;
    width: 24px;
    height: 24px;
}

.header-left {
    display: flex;
    width: 100px;
    justify-content: space-between;
    align-items: center;
    margin-left: 50px;
}

.header-right {
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items: center;
}

.header-right div:hover .list {
    display: block;
}

.list li:hover {
    background-color: skyblue;
}

.list {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 200px;
    padding: 10px 20px;
    right: 0px;
    border-radius: 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.list li {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 40px;
    margin-bottom: 10px;
    color: #fff;
}

.list .icon {
    width: 20px;
    height: 20px;
    padding: 0 20px;
}

.aside {
    background-image: url('https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg');
}

.aside .menu {   
    background-image: url('https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg');
}

.icon {
    width: 40px;
    height: 40px;
}
.el-menu-item-group__title{
    background-color: rgba(254,249,246) !important;
}
.el-sub-menu .el-menu-item {
    background-color: rgba(254,249,246) !important;
}
.el-sub-menu__title:hover{
    background-color:  #fff !important;
}
.el-menu-item:hover{
    background-color:  #fff !important;
}
</style>